var mapName = "china";
var data = [
  { name: "北京", value: 199 },
  { name: "天津", value: 42 },
  { name: "河北", value: 102 },
  { name: "山西", value: 81 },
  { name: "内蒙古", value: 47 },
  { name: "辽宁", value: 67 },
  { name: "吉林", value: 82 },
  { name: "黑龙江", value: 123 },
  { name: "上海", value: 24 },
  { name: "江苏", value: 92 },
  { name: "浙江", value: 114 },
  { name: "安徽", value: 109 },
  { name: "福建", value: 116 },
  { name: "江西", value: 91 },
  { name: "山东", value: 119 },
  { name: "河南", value: 137 },
  { name: "湖北", value: 116 },
  { name: "湖南", value: 114 },
  { name: "重庆", value: 91 },
  { name: "四川", value: 125 },
  { name: "贵州", value: 62 },
  { name: "云南", value: 83 },
  { name: "西藏", value: 9 },
  { name: "陕西", value: 80 },
  { name: "甘肃", value: 56 },
  { name: "青海", value: 10 },
  { name: "宁夏", value: 18 },
  { name: "新疆", value: 180 },
  { name: "广东", value: 123 },
  { name: "广西", value: 59 },
  { name: "海南", value: 14 },
];

var geoCoordMap = {};
var toolTipData = [
  {
    name: "北京",
    value: [
      { name: "科技人才总数", value: 95 },
      { name: "理科", value: 82 },
    ],
  },
  {
    name: "天津",
    value: [
      { name: "文科", value: 22 },
      { name: "理科", value: 20 },
    ],
  },
  {
    name: "河北",
    value: [
      { name: "文科", value: 60 },
      { name: "理科", value: 42 },
    ],
  },
  {
    name: "山西",
    value: [
      { name: "文科", value: 40 },
      { name: "理科", value: 41 },
    ],
  },
  {
    name: "内蒙古",
    value: [
      { name: "文科", value: 23 },
      { name: "理科", value: 24 },
    ],
  },
  {
    name: "辽宁",
    value: [
      { name: "文科", value: 39 },
      { name: "理科", value: 28 },
    ],
  },
  {
    name: "吉林",
    value: [
      { name: "文科", value: 41 },
      { name: "理科", value: 41 },
    ],
  },
  {
    name: "黑龙江",
    value: [
      { name: "文科", value: 35 },
      { name: "理科", value: 31 },
    ],
  },
  {
    name: "上海",
    value: [
      { name: "文科", value: 12 },
      { name: "理科", value: 12 },
    ],
  },
  {
    name: "江苏",
    value: [
      { name: "文科", value: 47 },
      { name: "理科", value: 45 },
    ],
  },
  {
    name: "浙江",
    value: [
      { name: "文科", value: 57 },
      { name: "理科", value: 57 },
    ],
  },
  {
    name: "安徽",
    value: [
      { name: "文科", value: 57 },
      { name: "理科", value: 52 },
    ],
  },
  {
    name: "福建",
    value: [
      { name: "文科", value: 59 },
      { name: "理科", value: 57 },
    ],
  },
  {
    name: "江西",
    value: [
      { name: "文科", value: 49 },
      { name: "理科", value: 42 },
    ],
  },
  {
    name: "山东",
    value: [
      { name: "文科", value: 67 },
      { name: "理科", value: 52 },
    ],
  },
  {
    name: "河南",
    value: [
      { name: "文科", value: 69 },
      { name: "理科", value: 68 },
    ],
  },
  {
    name: "湖北",
    value: [
      { name: "文科", value: 60 },
      { name: "理科", value: 56 },
    ],
  },
  {
    name: "湖南",
    value: [
      { name: "文科", value: 62 },
      { name: "理科", value: 52 },
    ],
  },
  {
    name: "重庆",
    value: [
      { name: "文科", value: 47 },
      { name: "理科", value: 44 },
    ],
  },
  {
    name: "四川",
    value: [
      { name: "文科", value: 65 },
      { name: "理科", value: 60 },
    ],
  },
  {
    name: "贵州",
    value: [
      { name: "文科", value: 32 },
      { name: "理科", value: 30 },
    ],
  },
  {
    name: "云南",
    value: [
      { name: "文科", value: 42 },
      { name: "理科", value: 41 },
    ],
  },
  {
    name: "西藏",
    value: [
      { name: "文科", value: 5 },
      { name: "理科", value: 4 },
    ],
  },
  {
    name: "陕西",
    value: [
      { name: "文科", value: 38 },
      { name: "理科", value: 42 },
    ],
  },
  {
    name: "甘肃",
    value: [
      { name: "文科", value: 28 },
      { name: "理科", value: 28 },
    ],
  },
  {
    name: "青海",
    value: [
      { name: "文科", value: 5 },
      { name: "理科", value: 5 },
    ],
  },
  {
    name: "宁夏",
    value: [
      { name: "文科", value: 10 },
      { name: "理科", value: 8 },
    ],
  },
  {
    name: "新疆",
    value: [
      { name: "文科", value: 36 },
      { name: "理科", value: 31 },
    ],
  },
  {
    name: "广东",
    value: [
      { name: "文科", value: 63 },
      { name: "理科", value: 60 },
    ],
  },
  {
    name: "广西",
    value: [
      { name: "文科", value: 29 },
      { name: "理科", value: 30 },
    ],
  },
  {
    name: "海南",
    value: [
      { name: "文科", value: 8 },
      { name: "理科", value: 6 },
    ],
  },
];

/*获取地图数据*/
myChart.showLoading();
var mapFeatures = echarts.getMap(mapName).geoJson.features;
myChart.hideLoading();
mapFeatures.forEach(function (v) {
  // 地区名称
  var name = v.properties.name;
  // 地区经纬度
  geoCoordMap[name] = v.properties.cp;
});

console.log(data);
console.log(toolTipData);
var max = 480,
  min = 9; // todo
var maxSize4Pin = 100,
  minSize4Pin = 20;

var convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
      });
    }
  }
  return res;
};
option = {
  tooltip: {
    padding: 0,
    enterable: true,
    transitionDuration: 1,
    textStyle: {
      color: "#000",
      decoration: "none",
    },
    // position: function (point, params, dom, rect, size) {
    //   return [point[0], point[1]];
    // },
    formatter: function (params) {
      // console.log(params)
      var tipHtml = "";
      tipHtml =
        '<div style="width:280px;height:180px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +
        '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' +
        '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' +
        "</i>" +
        '<span style="margin-left:10px;color:#fff;font-size:16px;">' +
        params.name +
        "</span>" +
        "</div>" +
        '<div style="padding:20px">' +
        '<p style="color:#fff;font-size:12px;">' +
        '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
        "</i>" +
        "单位总数：" +
        '<span style="color:#11ee7d;margin:0 6px;">' +
        toolTipData.length +
        "</span>" +
        "个" +
        "</p>" +
        '<p style="color:#fff;font-size:12px;">' +
        '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
        "</i>" +
        "总人数：" +
        '<span style="color:#f48225;margin:0 6px;">' +
        toolTipData.length +
        "</span>" +
        "个" +
        "</p>" +
        '<p style="color:#fff;font-size:12px;">' +
        '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
        "</i>" +
        "总人数：" +
        '<span style="color:#f4e925;margin:0 6px;">' +
        toolTipData.length +
        "</span>" +
        "个" +
        "</p>" +
        '<p style="color:#fff;font-size:12px;">' +
        '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
        "</i>" +
        "总人数：" +
        '<span style="color:#25f4f2;margin:0 6px;">' +
        toolTipData.length +
        "</span>" +
        "个" +
        "</p>" +
        "</div>" +
        "</div>";
      setTimeout(function () {
        tooltipCharts(params.name);
      }, 10);
      return tipHtml;
    },
  },

  visualMap: {
    show: true,
    min: 0,
    max: 200,
    left: "10%",
    top: "bottom",
    calculable: true,
    seriesIndex: [1],
    inRange: {
      color: ["#04387b", "#467bc0"], // 蓝绿
    },
  },
  geo: {
    show: true,
    map: mapName,
    label: {
      normal: {
        show: false,
      },
      emphasis: {
        show: false,
      },
    },
    roam: false,
    itemStyle: {
      normal: {
        areaColor: "#023677",
        borderColor: "#1180c7",
      },
      emphasis: {
        areaColor: "#4499d0",
      },
    },
  },
  series: [
    {
      name: "散点",
      type: "scatter",
      coordinateSystem: "geo",
      data: convertData(data),
      symbolSize: function (val) {
        return val[2] / 10;
      },
      label: {
        normal: {
          formatter: "{b}",
          position: "right",
          show: true,
        },
        emphasis: {
          show: true,
        },
      },
      itemStyle: {
        normal: {
          color: "#fff",
        },
      },
    },
    {
      type: "map",
      map: mapName,
      geoIndex: 0,
      aspectScale: 0.75, //长宽比
      showLegendSymbol: false, // 存在legend时显示
      label: {
        normal: {
          show: true,
        },
        emphasis: {
          show: false,
          textStyle: {
            color: "#fff",
          },
        },
      },
      roam: true,
      itemStyle: {
        normal: {
          areaColor: "#031525",
          borderColor: "#3B5077",
        },
        emphasis: {
          areaColor: "#2B91B7",
        },
      },
      animation: false,
      data: data,
    },
    {
      name: "点",
      type: "scatter",
      coordinateSystem: "geo",
      zlevel: 6,
    },
    {
      name: "Top 5",
      type: "effectScatter",
      coordinateSystem: "geo",
      data: convertData(
        data
          .sort(function (a, b) {
            return b.value - a.value;
          })
          .slice(0, 10)
      ),
      symbolSize: function (val) {
        return val[2] / 10;
      },
      showEffectOn: "render",
      rippleEffect: {
        brushType: "stroke",
      },
      hoverAnimation: true,
      label: {
        normal: {
          formatter: "{b}",
          position: "left",
          show: false,
        },
      },
      itemStyle: {
        normal: {
          color: "yellow",
          shadowBlur: 10,
          shadowColor: "yellow",
        },
      },
      zlevel: 1,
    },
  ],
};
